<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本比对测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        textarea {
            width: 100%;
            height: 100px;
            font-family: monospace;
        }
        button {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .diff-added {
            background-color: #d4edda;
            color: #155724;
            padding: 2px 4px;
            border-radius: 3px;
        }
        .diff-removed {
            background-color: #f8d7da;
            color: #721c24;
            padding: 2px 4px;
            border-radius: 3px;
            text-decoration: line-through;
        }
        .diff-unchanged {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>文本比对功能测试</h1>
    
    <div class="test-section">
        <h2>测试用例 1: 简单字符替换</h2>
        <div class="input-group">
            <label>原始文本:</label>
            <textarea id="test1-text1">Hello World</textarea>
        </div>
        <div class="input-group">
            <label>对比文本:</label>
            <textarea id="test1-text2">Hello Universe</textarea>
        </div>
        <button onclick="testDiff('test1')">测试比对</button>
        <div id="test1-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>测试用例 2: 添加和删除</h2>
        <div class="input-group">
            <label>原始文本:</label>
            <textarea id="test2-text1">这是一个测试文本</textarea>
        </div>
        <div class="input-group">
            <label>对比文本:</label>
            <textarea id="test2-text2">这是一个新的测试文本</textarea>
        </div>
        <button onclick="testDiff('test2')">测试比对</button>
        <div id="test2-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>测试用例 3: 空文本</h2>
        <div class="input-group">
            <label>原始文本:</label>
            <textarea id="test3-text1"></textarea>
        </div>
        <div class="input-group">
            <label>对比文本:</label>
            <textarea id="test3-text2">新内容</textarea>
        </div>
        <button onclick="testDiff('test3')">测试比对</button>
        <div id="test3-result" class="result"></div>
    </div>

    <script>
        // 简单的字符级比对算法
        function simpleCharDiff(text1, text2) {
            const result = []
            const len1 = text1.length
            const len2 = text2.length
            let i = 0, j = 0
            
            while (i < len1 || j < len2) {
                if (i < len1 && j < len2 && text1[i] === text2[j]) {
                    // 找到相同字符，收集连续的相同字符
                    let unchanged = ''
                    while (i < len1 && j < len2 && text1[i] === text2[j]) {
                        unchanged += text1[i]
                        i++
                        j++
                    }
                    result.push({ type: 'unchanged', value: unchanged })
                } else {
                    // 处理差异
                    if (i < len1) {
                        result.push({ type: 'removed', value: text1[i] })
                        i++
                    }
                    if (j < len2) {
                        result.push({ type: 'added', value: text2[j] })
                        j++
                    }
                }
            }
            
            return result
        }

        function escapeHtml(text) {
            const div = document.createElement('div')
            div.textContent = text
            return div.innerHTML
        }

        function testDiff(testId) {
            const text1 = document.getElementById(`${testId}-text1`).value
            const text2 = document.getElementById(`${testId}-text2`).value
            const resultDiv = document.getElementById(`${testId}-result`)
            
            try {
                const diff = simpleCharDiff(text1, text2)
                let result = ''
                let addedCount = 0
                let removedCount = 0
                let unchangedCount = 0

                diff.forEach(part => {
                    if (part.added) {
                        result += `<span class="diff-added">${escapeHtml(part.value)}</span>`
                        addedCount += part.value.length
                    } else if (part.removed) {
                        result += `<span class="diff-removed">${escapeHtml(part.value)}</span>`
                        removedCount += part.value.length
                    } else {
                        result += `<span class="diff-unchanged">${escapeHtml(part.value)}</span>`
                        unchangedCount += part.value.length
                    }
                })

                resultDiv.innerHTML = `
                    <strong>比对结果:</strong><br>
                    新增: ${addedCount} 字符<br>
                    删除: ${removedCount} 字符<br>
                    相同: ${unchangedCount} 字符<br><br>
                    ${result}
                `
            } catch (err) {
                resultDiv.innerHTML = `<strong>错误:</strong> ${err.message}`
            }
        }
    </script>
</body>
</html> 